---
title: Pemasangan
description: Mula menggunakan RainbowKit
---

# Pemasangan

## Mula menggunakan RainbowKit

### Permulaan cepat

Anda boleh membina projek baru RainbowKit + [wagmi](https://wagmi.sh) + [Next.js](https://nextjs.org) dengan salah satu perintah berikut, menggunakan pengurus pakej pilihan anda:

```bash
npm init @rainbow-me/rainbowkit@latest
# or
pnpm create @rainbow-me/rainbowkit@latest
# or
yarn create @rainbow-me/rainbowkit
```

Ini akan meminta anda untuk nama projek, menjana direktori baru yang mengandungi projek templat, dan memasang semua kebergantungan yang diperlukan.

Sebagai alternatif, anda boleh mengintegrasikan RainbowKit secara manual ke dalam projek sedia ada anda.

### Tetapan manual

Pasang RainbowKit dan kebergantungan setara, [wagmi](https://wagmi.sh/), [viem](https://viem.sh), dan [@tanstack/react-query](https://tanstack.com/query/v5).

```bash
npm install @rainbow-me/rainbowkit wagmi viem@2.x @tanstack/react-query
```

> Nota: RainbowKit adalah perpustakaan [React](https://reactjs.org/).

#### Import

Import RainbowKit, Wagmi dan TanStack Query.

```tsx
import '@rainbow-me/rainbowkit/styles.css';

import {
  getDefaultConfig,
  RainbowKitProvider,
} from '@rainbow-me/rainbowkit';
import { WagmiProvider } from 'wagmi';
import {
  mainnet,
  polygon,
  optimism,
  arbitrum,
  base,
} from 'wagmi/chains';
import {
  QueryClientProvider,
  QueryClient,
} from "@tanstack/react-query";
```

#### Konfigurasi

Konfigurasikan rantai yang anda inginkan dan jana penyambung yang diperlukan. Anda juga perlu menyiapkan konfigurasi `wagmi`. Jika dApp anda menggunakan rendering sisi pelayan (SSR), pastikan meletakkan `ssr` kepada `true`.

> Nota: Setiap dApp yang bergantung pada WalletConnect kini perlu mendapatkan `projectId` dari [WalletConnect Cloud](https://cloud.walletconnect.com/). Ini adalah percuma sepenuhnya dan hanya mengambil masa beberapa minit.

```tsx line=4-99
...
import { getDefaultConfig } from '@rainbow-me/rainbowkit';

const config = getDefaultConfig({
  appName: 'My RainbowKit App',
  projectId: 'YOUR_PROJECT_ID',
  chains: [mainnet, polygon, optimism, arbitrum, base],
  ssr: true, // If your dApp uses server side rendering (SSR)
});
```

#### Bungkus penyedia

Bungkus aplikasi anda dengan `RainbowKitProvider`, [`WagmiProvider`](https://wagmi.sh/react/api/WagmiProvider#wagmiprovider), dan [`QueryClientProvider`](https://tanstack.com/query/v4/docs/framework/react/reference/QueryClientProvider).

```tsx
const queryClient = new QueryClient();

const App = () => {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider>
          {/* Your App */}
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
};
```

#### Tambahkan butang sambung

Kemudian, dalam aplikasi anda, import dan paparkan komponen `ConnectButton`.

```tsx
import { ConnectButton } from '@rainbow-me/rainbowkit';

export const YourApp = () => {
  return <ConnectButton />;
};
```

RainbowKit kini akan menguruskan pemilihan dompet pengguna anda, memaparkan maklumat dompet/transaksi dan menangani penukaran rangkaian/dompet.

#### Penetapan alat pembinaan tambahan

Beberapa alat pembinaan memerlukan persediaan tambahan.

##### Remix

Apabila menggunakan [Remix](https://remix.run), anda mesti mengisi modul `buffer`, `events`, dan `http`. Rujuk konfigurasi Remix di bawah, atau [projek contoh Remix kami](https://github.com/rainbow-me/rainbowkit/blob/main/examples/with-remix).

```ts
/** @type {import('@remix-run/dev').AppConfig} */
export default {
  ignoredRouteFiles: ["**/.*"],
  browserNodeBuiltinsPolyfill: {
    modules: { buffer: true, events: true, http: true },
  },
};
```

### Bersedia untuk penerapan

Secara lalai, dApp anda menggunakan penyedia RPC awam untuk setiap rantai untuk mendapatkan baki, menyelesaikan nama ENS, dan banyak lagi. Ini boleh menyebabkan masalah kebolehpercayaan untuk pengguna anda kerana nod awam dikenakan had kadar. Sebaiknya anda membeli akses ke penyedia RPC melalui perkhidmatan seperti [Alchemy](https://www.alchemy.com/) atau [QuickNode](https://www.quicknode.com/), dan mentakrifkan Transports anda sendiri dalam Wagmi. Ini dapat dicapai dengan menambah parameter `transports` di `getDefaultConfig` atau melalui `createConfig` Wagmi secara langsung.

Transport adalah lapisan tengah jaringan yang mengurus penghantaran permintaan JSON-RPC ke Penyedia Node Ethereum (seperti Alchemy, Infura, dll).

**Contoh dengan `http` transport**

```tsx
import { getDefaultConfig } from '@rainbow-me/rainbowkit';
import { http } from 'wagmi';
import { mainnet, sepolia } from 'wagmi/chains';

const config = getDefaultConfig({
  appName: 'My RainbowKit App',
  projectId: 'YOUR_PROJECT_ID',
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http('https://eth-mainnet.g.alchemy.com/v2/...'),
    [sepolia.id]: http('https://eth-sepolia.g.alchemy.com/v2/...'),
  },
});
```

Untuk keterangan lanjut, lihat [dokumen transport wagmi](https://wagmi.sh/core/api/transports#transports).

### Tambahkan fungsi anda sendiri

Sekarang pengguna anda dapat menyambungkan dompet mereka, anda boleh mula membina selebihnya aplikasi anda menggunakan [wagmi.](https://wagmi.sh)

Hantar transaksi, berinteraksi dengan kontrak, selesaikan perincian ENS dan banyak lagi dengan rangkaian lengkap wagmi’s React Hooks.

Untuk maklumat lebih lanjut, rujuk [dokumentasi wagmi.](https://wagmi.sh)

### Contoh lanjut

Untuk melihat beberapa contoh berjalan RainbowKit, atau malah menggunakan mereka untuk secara automatik mencipta projek baru, lihat [contoh rasmi](https://github.com/rainbow-me/rainbowkit/tree/main/examples).

Untuk mencuba RainbowKit terus dalam penyemak imbas anda, lihat pautan CodeSandbox di bawah:

- dengan [Create React App](https://codesandbox.io/p/sandbox/github/rainbow-me/rainbowkit/tree/main/examples/with-create-react-app)
- dengan [Next.js](https://codesandbox.io/p/sandbox/github/rainbow-me/rainbowkit/tree/main/examples/with-next)
- dengan [Next.js App Router](https://codesandbox.io/p/sandbox/github/rainbow-me/rainbowkit/tree/main/examples/with-next-app)
- dengan [Remix](https://codesandbox.io/p/sandbox/github/rainbow-me/rainbowkit/tree/main/examples/with-remix)
- dengan [Vite](https://codesandbox.io/p/sandbox/github/rainbow-me/rainbowkit/tree/main/examples/with-vite)
- dengan [React Router](https://codesandbox.io/p/sandbox/github/rainbow-me/rainbowkit/tree/main/examples/with-react-router)
